<template>
	<view class="li-pie-chart">
		<view class="charts-box">
			<!-- 如果所有 value 都为 0 或为空，则显示占位提示 -->
			<div v-if="isEmpty">
				<p style="text-align: center; padding: 40px 0; color: #999">暂无数据</p>
			</div>
			<qiun-data-charts
				v-else
				type="pie"
				:opts="opts"
				:chartData="{
					series: [
						{
							data: cd
						}
					]
				}"
				:canvas2d="canvas2d"
			/>
		</view>
	</view>
</template>
<script>
export default {
	name: 'LiStatisticsChart',
	props: {
		cd: {
			required: true
		},
		canvas2d: {
			type: Boolean,
			default: true
		},
		opts: {
			default: {
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 3,
						borderColor: '#FFFFFF'
					}
				}
			}
		}
	},
	computed: {
		isEmpty() {
			return this.cd.every((ele) => {
				if (ele.percentage === '0%') {
					return true;
				}
				return false;
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.li-pie-chart {
	.charts-box {
		width: 100%;
		height: 300px;
	}
}
</style>
